<template>
	<view class="app_Cont">
		<scroll-view class="showCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" v-if="showCont">
			<view class="bannerCont">
				 <u-swiper
					:list="bannerArr"
					@click="bannerClick"
					indicator
					indicatorMode="line"
					circular
				></u-swiper>
			</view>
			<view class="headCard">
				<view class="schoolInfo">
					<image class="schoolImg" :src="formData.school_logo"></image>
					<view class="schoolNameCont">
						<view class="headName">{{formData.school_name}}</view>
						<view class="shoolCont">
							<view class="shoolAddress">
								<view class="iconfont icon-dizhi"></view>
								<view class="addressText">{{formData.school_address}}</view>
							</view>
							<view class="addressBtn" @click="toMapFn">导航</view>
						</view>
					</view>
				</view>
				<view class="headCardInfo">
					<view class="headCardInfoItem" v-if="formData.school_introduction">
						<view class="infoItemName">【学校简介】</view>
						<view class="infoItemText textWrap">
							{{getInfoText(formData.school_introduction)}}
						</view>
					</view>
					<view class="headCardInfoItem" v-if="formData.school_zscyqk">
						<view class="infoItemName">【住宿餐饮情况】</view>
						<view class="infoItemText textWrap">
							{{getInfoText(formData.school_zscyqk)}}
						</view>
					</view>
					<view class="headCardInfoItem" v-if="formData.school_jtzn">
						<view class="infoItemName">【交通指南】</view>
						<view class="infoItemText textWrap">
							{{getInfoText(formData.school_jtzn)}}
						</view>
					</view>
					<view class="headCardInfoItem" v-if="formData.school_qtsm">
						<view class="infoItemName">【其他说明】</view>
						<view class="infoItemText textWrap">
							{{getInfoText(formData.school_qtsm)}}
						</view>
					</view>
				</view>
			</view>
			<view class="formMain">
				<view class="formHead">
					<view class="formName">
						<view class="shuTag"></view>
						<view>开班计划</view>
					</view>
					<view class="navCont">
						<view :class="navId==item.id?'navItem navActive':'navItem'" :key="index" v-for="(item,index) in navArr">
							<view>{{item.name}}</view>
							<view class="activeLine"></view>
						</view>
					</view>
				</view>
				<view class="workCont">
					<view class="workItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
						<view class="workHead">
							<view class="workNameInfo">
								<view class="workName">{{item.training_name}}</view>
							</view>
							<view class="workMoney">¥{{item.total_money}}</view>
						</view>
						<view class="workInfo">
							<view class="infoItem">
								<view class="infoName">培训人数</view>
								<view class="infoText">{{item.training_people}}
								<span class="redText" v-if="item.sy_training_people<=5&&item.sy_training_people>0">（剩余{{item.sy_training_people}}个名额）</span>
								<span class="redText" v-if="item.sy_training_people==0">（报名已满）</span>
								</view>
							</view>
							<view class="infoItem">
								<view class="infoName">培训时长</view>
								<view class="infoText">{{item.training_time}}</view>
							</view>
							<view class="infoItem">
								<view class="infoName">开课时间</view>
								<view class="infoText">{{item.training_sk_time}} 开课</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<load v-if="!showCont||isChange"></load>
	</view>
</template>

<script>
	import converData from "@/utils/converData";
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	export default {
		components:{load},
		data() {
			return {
				showCont:false,
				getInfoText:converData.changeLine,
				bannerArr:[],
				detailId:'',
				formData:{},
				listArr:[],
				page:1,
				per_page:5,
				last_page:0,
				isChange:false,
				share:{
				   title: '鲸领航系统分享',
				   imageUrl:'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
				}
			};
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		methods:{
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getList()
				}
			},
			toMapFn(){
				uni.openLocation({
					longitude: Number(this.formData.longitude),
					latitude: Number(this.formData.latitude),          
					name: this.formData.school_name,
					address: this.formData.school_address,
					success: function (res) {
						console.log('打开系统位置地图成功')
					},
					fail: function (error) {
					  console.log(error)
					},
				})
			},
			bannerClick(index){
				
			},
			detailFn(item){
				uni.navigateTo({
					url: '../trainDetail/trainDetail?id='+item.training_content_id
				});
			},
			getList(){
				let data = {
					page:this.page,
					per_page:this.per_page,
					school_id:this.detailId,
				}
				api.getRequst(data,'/api/Training/schoolClass').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}
					this.isChange = false
				})
			},
			getData(){
				let data = {
					school_id:this.detailId,
				}
				api.getRequst(data,'/api/Training/getSchoolDetails').then((res)=>{
					if(res.code==1){
						this.formData = res.data
						this.bannerArr = res.data.school_banner.split(',')
						this.share.title =res.data.school_name
						
					}
					this.showCont = true
				})
			}
		},
		async onLoad(option) {
			this.detailId = option.id
			await this.getList()
			this.getData()
		}
	}
</script>

<style lang="scss">
	.showCont{
		background-color: #f6f7f9;
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		
		.headCard{
			width: 100%;
			position: relative;
			margin-top: -30rpx;
			z-index: 2;
			background-color: #3f55cc;
			// background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
			color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 40rpx 4% 30rpx;
			box-sizing: border-box;
			.schoolInfo{
				display: flex;
				align-items: center;
				.schoolImg{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
					margin-right: 30rpx;
				}
				.schoolNameCont{
					flex: 1;
					width: 100rpx;
					
					.headName{
						font-size: 32rpx;
						font-weight: bold;
					}
					.shoolCont{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.shoolAddress{
							display: flex;
							margin-top: 10rpx;
							align-items: center;
							width: 100rpx;
							flex: 1;
							color: #fff;
							margin-right: 30rpx;
							.addressText{
								width: 100%;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
							.iconfont{
								margin-right: 15rpx;
							}
						}
						.addressBtn{
							padding: 0 40rpx;
							font-size: 24rpx;
							border: 1px solid #fff;
							color: #fff;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 50rpx;
							box-sizing: border-box;
						}
					}
				}
			}
			
			.headCardInfo{
				width: 100%;
				padding: 30rpx 0%;
				box-sizing: border-box;
				margin-top: 30rpx;
				border-top: 1px dashed #fff;
				.headCardInfoItem{
					margin-bottom: 30rpx;
					.infoItemName{
						font-weight: bold;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
					.infoItemText{
						line-height: 40rpx;
					}
				}
			}
		}
		.formMain{
			padding: 30rpx 4%;
			box-sizing: border-box;
			.formHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.formName{
					flex: 1;
					width: 100rpx;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;
					.shuTag{
						height: 10rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 120rpx;
						background-image: linear-gradient(to right,white,#3f55cc);
					}
				}
				.navCont{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					box-sizing: border-box;
					.navItem{
						color: #000;
						text-align: center;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-left: 30rpx;
						.activeLine{
							width: 30rpx;
							margin-top: 10rpx;
							height: 6rpx;
							border-radius: 6rpx;
							background-color: #f8f8f8;
						}
					}
					.navActive{
						color: #3f55cc;
						.activeLine{
							background-color: #3f55cc;
						}
					}
				}
			}
			.workCont{
				width: 100%;
				box-sizing: border-box;
				.workItem{
					background-color: #fff;
					padding: 30rpx 4% 20rpx;
					margin-top: 20rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					.workHead{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.workNameInfo{
							display: flex;
							align-items: center;
							.workName{
								font-size: 28rpx;
								font-weight: bold;
								max-width: 350rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.headShu{
								width: 4rpx;
								border-radius: 4rpx;
								background-color: #333;
								height: 24rpx;
								margin: 0 15rpx;
							}
							.workTag{
								padding: 5rpx 20rpx;
								font-size: 24rpx;
								border: 1px solid #3f55cc;
								color: #3f55cc;
								margin-left: 10rpx;
								border-radius: 5rpx;
								transform: scale(0.8);
							}
						}
						.workMoney{
							color: #3f55cc;
						}
					}
					.workInfo{
						.infoItem{
							display: flex;
							align-items: center;
							margin-top: 15rpx;
							.infoName{
								width: 120rpx;
								margin-right: 15rpx;
								color: #666;
							}
							.infoText{
								flex: 1;
								width: 100rpx;
								.redText{
									color: #ff5757;
								}
							}
							
						}
					}
				}
			}
		}
	}
</style>
